<template>
<div class="pagination">
    <button @click="onsubpage">上一页</button>
    <button @click="setpage(1)" :class="(pageNo===1)? 'active' : ''" v-if="continues<allpage && pagstend.sta > 1">1</button>
    <span   v-if="continues<allpage && pagstend.sta > 2 ">...</span>
    <button @click="setpage(index+pagstend.sta)" :class="(pageNo===index+pagstend.sta)? 'active' : ''" v-for="(a,index) in (pagstend.end-pagstend.sta+1)" :key="index">{{index+pagstend.sta}}</button>
    <button  v-if="continues<allpage && pagstend.end < allpage -1">···</button>
    <button @click="setpage(allpage)" :class="(pageNo===allpage)? 'active' : ''"  v-if="continues<allpage && pagstend.end < allpage">{{allpage}}</button>
    <button @click="onaddpage">下一页</button>

    <span>共 {{total}} 条</span>
  </div>
</template>

<script>
// import { watch } from 'vue'

    export default {
        name:'Paging',
        // total 一共多少数据  pageSize一页多少数据 continues连续多少页 pageNo当前页
        props:['total','pageSize','continues','pageNo'],
        methods:{
          setpage(index1){
            // console.log(index1);
            this.$emit('clpages',index1)
          },
          onaddpage(){
            if(this.pageNo ===this.allpage){
              return
            }
            this.$emit('addpage')
          },
          onsubpage(){
            if(this.pageNo === 1){
              return
            }
            console.log(1);
            this.$emit('subpage')
          }
        },
        computed:{
            allpage(){
              return  Math.ceil(this.total/this.pageSize)
            },
            pagstend(){
              
              let shep = Math.floor(this.continues/2)
              let sta=this.pageNo - shep
              let end=this.pageNo + shep

              if(this.continues>this.allpage){
                sta = 1
                end =  this.allpage
              }
              if (sta < 1) {
                sta = 1
                end =  this.continues
              }

              if(end > this.allpage){
                end =  this.allpage
                sta = this.allpage-this.continues+1
              }
              // console.log(sta,end);
              return {sta,end}
            },
        },
    }
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #c81623;
      color: #fff;
    }
  }
  span {
    display: inline-block;
    line-height: 28px;
    font-size: 14px;
    color: gray;
    vertical-align: middle;
  }
}
.active {
      cursor: not-allowed;
      background-color: #c81623;
      color: #fff;
    }
</style>